<template>
    <div class="settings-container">
        <h3 class="title">系统设置</h3>
        <div class="container">
            <div v-for="(item,index) in flyTypeData" :key="index">
                <h3 class="title-desc" v-if="index === 0">起飞提醒设置</h3>
                <h3 class="title-desc" v-else-if="index === 1">入区提醒设置</h3>
                <h3 class="title-desc" v-else-if="index === 2">出区提醒设置</h3>
                <div class="content">
                    <div class="content-item" v-for='(val,idx) in item' :key="idx">
                        <span class="desc common-ellipsis" :title="val.planTypeName">{{val.planTypeName}}</span>
                        <el-checkbox v-model="val.checked" @change="changeOpen(index,idx,val.checked)">开启</el-checkbox>
                        <span v-if="val.checked" class="content-item-right">
                        <span class="text">提前</span> <el-input maxlength="2" v-model.trim="val.hoursInAdvance" class="content-input"></el-input> 小时
                          <el-input maxlength="2" v-model.trim="val.minutesInAdvance" class="content-input"></el-input> 分钟 提醒
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="common-footer-box between" :class="{'active':!isNarrow}">
            <el-button class="common-btn-primary" @click="onClickSaveData" v-has="'SS_edit'">保存</el-button>
        </div>
    </div>
</template>
<script>
  export default {
    props:{
      isNarrow:{
        type:Boolean,
        require: true
      }
    },
    data() {
      return {
        flyTypeDataCopy:[],
        flyTypeData:[]
      }
    },
    created() {
        this.asyncGetSetData();
    },
    methods: {
      //点击保存
      onClickSaveData() {
        if (this.validate()) {
          this.asyncPostSetData().then(res => {
            if (res.data.code === 200) {
              this.$message.success('保存成功');
              this.asyncGetSetData();
            } else {
              this.$message.error(res.data.msg);
            }
          })
        }
      },
      //保存设置数据
      asyncPostSetData() {
        return new Promise((resolve, reject) => {
          this.$axios.post("/config/saveRemindConfig", this.flyTypeData).then(res => {
            resolve(res)
          }).catch(error => {
            reject(error)
          });
        })
      },
      //获取设置数据
      asyncGetSetData() {
        this.$axios.get("/config/listRemindConfig").then((res) => {
          if (res.data.code === 200) {
            this.flyTypeDataCopy = JSON.parse(JSON.stringify([...res.data.data]));
            this.flyTypeData = res.data.data;
            this.flyTypeData.map(item => {
              item.map((val) => {
                if (val.remindFlag === 1 ) {
                  this.$set(val,'checked',true);
                } else {
                  this.$set(val,'checked',false);
                }
              })
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //当切换开启
      changeOpen(index,idx,item) {
        let currentInfo = this.flyTypeData[index][idx];
        if (item) {
          currentInfo.remindFlag = 1;
          currentInfo.hoursInAdvance = '2';
          currentInfo.minutesInAdvance = '00';
        } else {
          currentInfo.remindFlag = 2;
          currentInfo.hoursInAdvance = null;//null
          currentInfo.minutesInAdvance = null;
        }
      },
      // 校验
      validate() {
        let flag = true;
        this.flyTypeData.forEach(item => {
          item.forEach((val) => {
            if (val.remindFlag === 1 && val.hoursInAdvance === '' && val.minutesInAdvance === '') {
              this.$message.error('提醒时间不能为空');
              flag = false;
            } else if (val.remindFlag === 1 && (isNaN(val.hoursInAdvance) || isNaN(val.minutesInAdvance))) {
              this.$message.error('提醒时间请填写数字');
              flag = false;
            }
          })
        });
        return flag;
      }
    },
    beforeRouteLeave(to, from, next) {
      let flyData = [...this.flyTypeData];
      flyData.forEach(item => {
        item.forEach((val) => {
          if (val.checked || !val.checked) {
            if (val.checked) {
              val.remindFlag = 1;
            } else {
              val.remindFlag = 2;
            }
            delete val.checked;
          }
        })
      })
      if(JSON.stringify(this.flyTypeDataCopy) === JSON.stringify(flyData)) {
        next()
      } else {
        this.$confirm('', '是否保存设置', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showClose: false,
          type: 'warning',
          center: true,
          customClass: 'common-confirm-box',
          confirmButtonClass: 'common-btn-primary',
          cancelButtonClass: 'common-btn-text'
        }).then(() => {
          if (this.validate()) {
            this.asyncPostSetData().then(res => {
              if (res.data.code === 200) {
                this.$message.success('保存成功');
                next();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        }).catch(() =>{
          next();
        })
      }
    }
  }
</script>
<style scoped>
    .settings-container h3 {
        font-size: 16px;
        color: #262626;
    }

    .title {
        margin: 14px 0 17px 30px;
    }

    .container {
        margin: 0 10px;
        padding: 25px 25px 90px 25px;
        background-color: #ffffff;
    }

    .title-desc {
        padding-bottom: 10px;
        border-bottom: 1px dashed #C1CAD8;
    }

    .between {
        position: absolute;
        bottom: 0;
        left: 62px;
        right: 0;
    }
    .between.active {
        left: 270px;
    }
    .content-input {
        width: 60px;
        margin: 0 3px 0 10px;
    }
    .content {
        margin-top: 25px;
        color: #262626;
    }
    .content .desc{
        display: inline-block;
        width: 170px;
        margin-right: 20px;
        text-align: right;
        font-weight: bold;
    }
    .content .text{
        margin:0 5px 0 20px;
    }
    .content-item {
        position: relative;
        margin-bottom: 32px;
    }
    .content-item-right {
        position: absolute;
        left: 250px;
        top: -10px;
    }

</style>
<style>
    .settings-container .is-checked .el-checkbox__label {
        color: #262626;
    }
    .settings-container .el-checkbox {
        vertical-align: top;
    }
</style>